<template>
	<view class="order-page">
		<view class="top-con c-flex jc-between c-item-center">
			<view class="left c-flex c-flex-col">
				<text class="txt-1">气瓶总数</text>
				<text class="txt-2">{{count}}<text class="txt-3">瓶</text></text>
			</view>
			<image :src="stockImgUrl +'gasbottle-icon.png'"></image>
		</view>
		<view class="search-con c-flex c-flex-col">
			<view class="c-flex jc-between gap-5">
				<view class="input-con c-flex jc-start c-item-center ">
					<image :src="remoteImgUrl+'search-icon.png'" style="width: 42rpx;max-height: 42rpx;    margin-right: 12rpx;"></image>
					<input class="uni-input" v-model="lpgUserName" name="text" style="width:72%" confirm-type="search"  placeholder="搜索瓶身编码" @confirm="onInputChange" />
					<view class="line"></view>
					<text @click="onInputChange">搜索</text>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" 
									 :up="upOption" @up="upCallback">
			<view class="p-list">
				<view class="p-l-item c-flex jc-between" v-for="(item,i) in list" :key="i" @click="onItemClick(item)">
					<view class="c-flex ">
						<image :src="orderImgUrl+ 'gas-bottle.png'"></image>
						<view class="">
							<view class="txt-1">瓶身编码：{{item.seqNum}}</view>
							<view class="txt-2">制造时间：{{item.madeDate}}</view>
						</view>
					</view>
					<view class="view-details">查看详情</view>
				</view>
			</view>
		</mescroll-body>
		
		<view class="add-bt" >
			<image :src="stockImgUrl+'stock-manage-add.png'"  @click="onAdd" mode=""></image>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {INSTOCK_STATUS} from '@/utils/global.js';
	import tydPrompt from '@/components/tyd-prompt/tyd-prompt.vue';
	export default {
		components: {
			tydPrompt
		},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件，内部已注册onPullDownRefresh)
		data() {
			return {
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				commonUrl: this.$API.IMG_URL + '/common/',
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				downOption:{
					auto:false,//初始化自动执行下啦刷新
					native: true // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
				},
				upOption:{
					auto:false,//初始化自动执行上啦刷新
					noMoreSize: 4, 
					empty:{
						tip: '~ 搜索无数据 ~',
						btnText: ''
					}
				},
				page:1,
				limit:10,
				lpgUserName:'',
				indicatorStyle:`height: 50px;line-height:50px;`,
				list:[
					// {time:'2024-04-23 15:21',status:1,orderNo:'33444999945959',ckf:'莒县能源加气站总站',shf:'高庄液化气站点',orderNum:'50瓶'},
					// {time:'2024-04-23 15:22',status:2,orderNo:'33444999945959',ckf:'莒县能源加气站总站',shf:'高庄液化气站点',orderNum:'50瓶'},
				],
				count:0
			};
		},
		onLoad(options) {
			console.log('onLoad')
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
			
		},
		onShow() {
			console.log('onShow')
			this.initStatist();
			this.mescroll.triggerUpScroll();
		},
		methods:{
			//初始化气瓶统计
			initStatist(){
				this.$API.findGasBottleStatist({}).then(res =>{
					this.count = res.count;
				})
			},
			
			initData(){
				uni.showLoading();
				const params = {page:this.page,limit:this.limit,seqNum:this.lpgUserName};
				this.$API.findGasBottles(params).then(res =>{
						uni.hideLoading();
						//设置列表数据
						if(res.page.currPage == 1) this.list = []; //如果是第一页需手动制空列表
						const currList  = res.page.list;
						if(res.page.totalCount != this.list.length)
							this.list=this.list.concat(currList); //追加新数据
						this.mescroll.endBySize(res.page.list.length,res.page.totalCount);//(当前页的数据个数, 总数据量) 判断是否有下一页
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			// 下拉刷新
			downCallback(page){
				this.mescroll.resetUpScroll()//重置列表为第一页 
				console.log('down')
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('up')
				this.page = page.num;
				//联网加载数据
				this.initData();
			},
			// 主动触发下拉刷新
			triggerDownScroll(){
				// this.mescroll.triggerDownScroll()
			},
			onInputChange(){
				this.mescroll.resetUpScroll()//重置列表为第一页 
			},
			onAdd() {
				uni.navigateTo({
					url:'./add'
				})
			},
			onItemClick(item){
				uni.navigateTo({
					url:'./add?id='+item.id
				})
			},
			
		}
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
.order-page{
	position:relative; background-image: linear-gradient(rgba(249, 195, 115, .3) 0%,#F9F9F9 100%);
	.top-con{
		padding:16rpx 124rpx 0 74rpx;
		image{width:116rpx;height:206rpx;}
		.txt-1{font-weight: bold;font-size: 28rpx;color: #522F00;}
		.txt-2{font-weight: normal;font-size: 64rpx;color: #522F00;}
		.txt-3{font-weight: 400;font-size: 24rpx;color: #522F00;}
	}
	.search-con{
		border-radius: 18rpx;padding: 20rpx 18rpx 0;
		.input-con{
			position: relative;width: 100%;border: 2rpx solid rgba(255, 154, 22, 1);
			height: 80rpx;line-height: 80rpx;padding-left: 18rpx;background: #ffffff;border-radius: 16rpx;font-size: 24rpx;
			.line{
				height: 40rpx;border: 2rpx solid rgba(255, 154, 22, 1);position: absolute;right: 115rpx;
			}
			text{
				font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;color: #3E3E3E;line-height: 40rpx;position: absolute;right: 38rpx;
			}
		}
		/*修改提示文字的颜色*/
		input::-webkit-input-placeholder {color: #8B959F;}
		input:-moz-placeholder {color: #8B959F;}
		input::-moz-placeholder { color: #8B959F;}
		input:-ms-input-placeholder { color: #8B959F;}
	}

	.p-list{
		margin: 20rpx 18rpx 0;
		.p-l-item{
			background: #FFFFFF;border-radius: 18rpx;padding: 24rpx 24rpx 32rpx;margin-bottom:20rpx;position:relative;
			image{width:64rpx;height:64rpx;margin-right:14rpx;}
			.txt-1{font-weight: 500;font-size: 28rpx;color: #333333;margin-bottom:12rpx;}
			.txt-2{font-weight: 400;font-size: 24rpx;color: #333333;}
			.view-details{
				width: 150rpx;height: 48rpx;line-height: 48rpx;background: rgba(228, 149, 45, 0.1);border-radius: 45rpx;text-align: center;
				font-weight: 500;font-size: 24rpx;color: #E46919;
			}
		}
	}
	.add-bt{
		position:fixed;right:22rpx;bottom:10%;
		image{width: 100rpx;height: 100rpx;}
	}
}
</style>
